﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"  />
<title>最美好的年华, 与你携手共度</title>
<link rel="shortcut icon" href="http://static.letle.com/letle/heart.ico" type="image/x-icon">
<link rel="stylesheet" href="${imsPath}/asset/css/nheader.css">
<link rel="stylesheet" href="${imsPath}/asset/css/nstyle.css">

</head>
<body>
  
<div class="wrap" id="wrap">
	<div class="wrapper">
    <div class="product_list" id="product_list">
      <div class="product_box shoulei show">
        <div class="bg_box">
          <img src="${imsPath}/asset/images/bg_shoulei.jpg">
        </div>
        <div class="content">
          <div class="main_box">
            <h2 class="hide_txt  png">
              <span class="txt_1 png"></span>
              <span class="txt_2 png"></span>
              <span class="txt_3 png"></span>
              <span class="txt_4 png"></span>
              <span class="txt_5 png"></span>
              <span class="txt_6 png"></span>
              <span class="txt_7 png"></span>
              <span class="txt_8 png"></span>
              <span class="txt_9 png"></span>
              <span class="txt_10 png"></span>
              <span class="txt_11 png"></span>
              <span class="txt_12 png"></span>
              <span class="txt_13 png"></span>
            </h2>
         
          </div>
        </div>
      </div>
      <div class="product_box xnet">
         <div class="bg_box">
          <img src="${imsPath}/asset/images/bg_xnet.jpg">
        </div>
        <div class="content">
          <div class="main_box">
            <h2 class="hide_txt  png">
              <span class="txt_1 png"></span>
              <span class="txt_2 png"></span>
              <span class="txt_3 png"></span>
              <span class="txt_4 png"></span>
              <span class="txt_5 png"></span>
              <span class="txt_6 png"></span>
              <span class="txt_7 png"></span>
              <span class="txt_8 png"></span>
              <span class="txt_9 png"></span>
            </h2>
          </div>
        </div>
      </div>
      <div class="product_box member">
        <div class="bg_box">
          <img src="${imsPath}/asset/images/bg_member.jpg">
        </div>
        <div class="content">
          <div class="main_box">
            <h2 class="hide_txt  png">
              <span class="txt_1 png"></span>
              <span class="txt_2 png"></span>
              <span class="txt_3 png"></span>
              <span class="txt_4 png"></span>
              <span class="txt_5 png"></span>
              <span class="txt_6 png"></span>
              <span class="txt_7 png"></span>
            </h2>
          </div>
        </div>
      </div>
      
      <div class="product_box xav">
        <div class="bg_box">
          <img src="${imsPath}/asset/images/bg_xav.jpg">
        </div>
        <div class="content">
          <div class="main_box">
            <h2 class="hide_txt png">
              <span class="txt_1 png"></span>
              <span class="txt_2 png"></span>
              <span class="txt_3 png"></span>
              <span class="txt_4 png"></span>
              <span class="txt_5 png"></span>
              <span class="txt_6 png"></span>
              <span class="txt_7 png"></span>
              <span class="txt_8 png"></span>
            </h2>
          </div>
        </div>
      </div>
    </div>
    <div class="product_btns" id="product_btns">
      <div class="content">
        <div class="btns_area">
          <div class="btns_box" id="control_box">
            <a href="#"  class="btn_ipr btn_shoulei cur"  ><span class="ic_shoulei hide_txt png"></span></a>
            <a href="#"  class="btn_xnet" ><span class="ic_xnet hide_txt png"></span></a>
            <a href="#"  class="btn_member"><span class="ic_member hide_txt png"></span></a>
            <a href="#"  class="btn_xav" ><span class="ic_xav hide_txt png"></span></a>
            <span class="ic_line" id="ic_line"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="rpt_bg png" id="rpt_bg"></div>
  </div>
</div>
<audio id="WxPlayMusic"  loop="loop">
  <source src="${imsPath}/asset/images/music/1.mp3" type="audio/mp3" />
<script src="${imsPath}/asset/js/jquery.js"></script>
<script>
  (function(){
    var $wrap=$("#wrap"),
        $pages=$("#product_list").find(".product_box"),
        $controlBox=$("#control_box"),
        $productBtns=$("#product_btns"),
        $controls=$controlBox.find("a"),
        $icLine=$("#ic_line"),
        $listTops=$("#list_top").find("li"),
        $hNav=$("#h_nav"),
        $hNavli=$hNav.find("li"),
        $hSubnav=$("#h_subnav"),
        $hSubDD=$hSubnav.find("dd"),
        $hBdot=$("#h_bdot"),
        $hSdot=$("#h_sdot"),
        $footer=$("#footer"),
        $bgs=$pages.find(".bg_box img"),
        $mainBoxs=$pages.find(".main_box"),
        $moreNav=$("#more_nav"),
        $rptBg=$("#rpt_bg");
    var data={
        pLength:$pages.length,
        curP:0,
        isCan:true,
        isOnbtn:false,
        fColor:[2,2,1,1,1],
        dur: 3500,
        cNum:0
    };
    var aDD=$controls.eq(0).width()+parseInt($controls.eq(0).css("margin-right").slice(0,-2))*2;
    var cId;
    var isCss3=function(){
      var style=document.createElement("div").style;
        for(var k in style){
          if(k.toLowerCase().indexOf("animation")>0){
            return true;
          }
         }
         return false;
    }();
    var isIE6=navigator.userAgent.indexOf("MSIE 6.0") > 0;
    //页面自缩放
    var resize=function(){
      var w=$(window).width(),
          h=$(window).height();
      $wrap.height(h);
      $moreNav.height(h);
      if(w/h<1920/1080){
        $bgs.height(h).css({width:"auto",margin:-.5*h+"px 0 0 "+-.5*1920/1080*h+"px"});
      }else{
        $bgs.width(w).css({height:"auto",margin:-.5*w*1080/1920+"px 0 0 "+-.5*w+"px"});
      }
      var imgH=$bgs.height();
      $mainBoxs.height(imgH).css("margin-top",-.5*imgH+"px");
      var cls;
      if(isCss3){
        document.getElementById("wrap").className="wrap big_view xbig";
        switch(true){
          case w>=1920:{cls="";break;}
          case w<1920&&w>=1680:{cls="small9";break;}
          case w<1680&&w>=1600:{cls="small8";break;}
          case w<1600&&w>=1536:{cls="small7";break;}
          case w<1536&&w>=1440:{cls="small6";break;}
          case w<1440&&w>=1366:{cls="small5";break;}
          case w<1366&&w>=1280:{cls="small4";break;}
          case w<1280&&w>=1024:{cls="small3";break;}
          case w<1024:{cls="small2";break;}
        }
        for(var i=0;i<data.pLength;i++){
          $pages.eq(i).find(".content").attr("class","content "+cls);
        }
        $productBtns.find(".content").attr("class","content "+cls);
      }else{
        switch(true){
          case w>=1600:{cls="big_view";break;}
          case w<1600&&w>=1440:{cls="mid_view";break;}
          case w<1440:{cls="small_view";break;}
        }
        var ws=$wrap[0].className;
        if(isIE6&&(ws.indexOf("big")!=-1||ws.indexOf("mid")!=-1||ws.indexOf("small")!=-1)&&ws.indexOf(cls)==-1)
          location.reload();
        wrap.className="wrap "+cls;
      }
      aDD=$controls.eq(0).width()+parseInt($controls.eq(0).css("margin-right").slice(0,-2))*2;
    };
    $(window).resize(resize);
    resize();

    var pageChange=function(idx){
      if(data.isOnbtn)
        return;
      if(idx>=-1&&idx<data.pLength&&idx!=data.curP&&data.isCan){
      data.isCan=false;
        data.cNum++;
        clearInterval(cId);
        idx=idx==-1?data.pLength-1:idx;
        $controls.removeClass("cur").eq(idx).addClass("cur");
        $pages.eq(data.curP).css({zIndex:0});
        $icLine.css({left:aDD*idx});
       // $footer.attr("class","footer f_color"+data.fColor[idx]);
        $pages.eq(idx).addClass("show").css({opacity:0,zIndex:1}).animate({opacity:1},400,function(){
          $pages.eq(data.curP).removeClass("show");
          $(this).addClass("show");
          data.isCan=true;
          data.curP=idx;
          data.cNum--;
          if(data.cNum==0){
            cId=setInterval(function(){
              pageChange((data.curP+1)%data.pLength);
            },data.dur);
          }
        });
      }
    }
    $controls.on("mouseenter",function(){
      data.isCan=true;
      pageChange($controls.index(this));
      $icLine.css({left:aDD*$controls.index(this)});
      data.isOnbtn=true;
    });
    $controls.on("mouseleave",function(){
      data.isOnbtn=false;
    });

    var isBottom=false;
    var bAni;
    var bottomHide=function(){
      if(isBottom){
        isBottom=false;
        if(bAni)
          clearTimeout(bAni),bAni=null;
        $footer.removeClass("show");
        $productBtns.removeClass("show");
        $rptBg.removeClass("show");
      }
    }
    var bottomShow=function(){
      if(!isBottom){
        isBottom=true;
        $footer.addClass("show");
        $productBtns.addClass("show");
        $rptBg.addClass("show");
        if(bAni)
          clearTimeout(bAni);
        bAni=setTimeout(bottomHide,2000);
      }
    }
    $footer.on("mouseenter",function(){
      if(bAni)
        clearTimeout(bAni),bAni=null;
    });
    $footer.on("mouseleave",function(){
      if(bAni)
        clearTimeout(bAni);
      bAni=setTimeout(bottomHide,2000);
    });
    $(document).on("mousewheel DOMMouseScroll",function(event){
      var sd=event.originalEvent.wheelDelta||event.originalEvent.detail*-1;
      if(sd>0){
        bottomHide();
      }
      else{
        bottomShow();
      }
    });
    cId=setInterval(function(){
      pageChange((data.curP+1)%data.pLength);
    },data.dur);

    //导航事件

    $("#nav_more").on("mouseenter",function(){
      $moreNav.addClass("show");
    });
    $moreNav.on("mouseleave",function(){
      $moreNav.removeClass("show");
      $hBdot.css({left:-9999,top:106});
    })
    $hNavli.on("mouseenter",function(){
      $hBdot.css({left:18,top:106+$hNavli.index(this)*69});
    });
    $hNav.on("mouseleave",function(){
      $hBdot.css({left:-9999});
    });
    $hSubnav.find("dt").on("mouseenter",function(){
      $hBdot.css({left:18});
      $hSdot.css({left:-9999});
    });
    $hSubDD.on("mouseenter",function(){
      $hSdot.css({left:18,top:53+$hSubDD.index(this)*44});
      $hBdot.css({left:-9999});
    });
    $hSubnav.on("mouseleave",function(){
      $hSdot.css({left:-9999});
    });
  })();
</script>

<script>
	function audioAutoPlay(id){  
			var audio = document.getElementById(id);  
			audio.play();  
			document.addEventListener("WeixinJSBridgeReady", function () {  
					audio.play();  
			}, false);  
			document.addEventListener('YixinJSBridgeReady', function() {  
				audio.play();  
			}, false);  
		}  
		audioAutoPlay('WxPlayMusic'); 
</script>

</body>
</html>

